<template>
  <div class="message_list_control">
    <div
      class="row list_item"
      :style="{ margin: !isSelect ? '0' : '0 0.9375rem' }"
      v-for="(item, index) in data"
      :key="index"
    >
      <div class="col-md-1" v-if="isSelect">
        <span class="es-checkbox">
          <label>
            <input type="checkbox" name="msg" :value="item.id" /><em></em>
          </label>
        </span>
      </div>
      <div class="col-md-1">
        <span class="avatar-item es-avatar es-avatar-large es-avatar-square">
          <i class="es-avatar-image">
            <img :src="item.avater" />
          </i>
        </span>
      </div>
      <div class="col-md-8" :class="!isSelect ? 'col-md-9' : ''">
        {{ item.msg }}
        <slot name="msgTools"></slot>
      </div>
      <div class="col-md-2">{{ item.time }}</div>
      <div class="es-divider es-divider-horizontal es-divider-default"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessageListControl",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    isSelect: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
};
</script>

<style lang="scss">
.message_list_control {
  .list_item {
    padding: 0.625rem 0;
    margin: 0 0.9375rem;
  }
}
</style>
